// 做一个单页面应用前端展示的项目
// 做个网站的展示，只有一个html页面，通过前端路由的切换来进行页面内容切换
// 前端路由他和我们之前所聊的服务器端的路由功能上是一样的
// 规则[路由] ==》 展示的内容
// 后端路由它会触发浏览器的刷新
// 前端，地址栏也会改变，但浏览器不会刷新，  按需加载
// 前端路由 浏览器端  hash(锚点)  html5(history)
// hash => 地址栏中有一个#开头  a标签/事件 路由跳转  onhashchange监听hash值的变化
// history => 更像后端路由模式展示(没有#号),如果服务器没有对应配置，则刷新会出现404，页面丢失情况
// history => 事件路由跳转 history.pushState/replaceState  回退事件监听 onpopstate


import indexView from '@/views/index'
import homeView from '@/views/home'
import notfoundView from '@/views/notfound'

// 前端路由表
let routes = [
  {
    // 路由匹配的规则
    path: '/index',
    // 匹配成功后，要执行的函数(组件)
    component: indexView
  },
  {
    path: '/home',
    component: homeView
  }
];

function renderPage() {
  let pathname = location.hash ? location.hash.slice(1) : '/index'
  let route = routes.find(item => item.path == pathname)
  route = route ? route : { path: '/404', component: notfoundView }
  document.querySelector('#root').innerHTML = route.component()
}


window.onhashchange = renderPage

window.onload = renderPage


